<template>
    <Header :title="address" />
    <van-address-edit
    :area-list="areaList"
    show-delete
    show-set-default
    show-search-result
    :address-info="addressInfo"
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    />
</template>

<script>
import Header from '@/components/Header.vue';
import { Toast } from 'vant';
import { computed, onMounted, reactive,toRefs } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default{
    components:{
        Header,
    },
    setup(){
        const store = useStore();
        const route = useRoute();
        const router = useRouter();
        const data = reactive({
            areaList:{
        province_list: {
          110000: "广东省",
          120000: "浙江省",
        },
        city_list: {
          110100: "广州市",
          110200: "深圳市",
          120100: "杭州市",
          120200: "宁波市",
        },
        county_list: {
          110101: "天河区",
          110102: "海珠区",
          120102: "上城区",
          130102: "下城区",
        },
      },
      addressInfo:{},
    });
    const onSave = (content)=>{
        if(route.query.type === 'add'){
            store.commit('addaddress', content);
        }else{
            store.commit('editaddress', content);
        }
        Toast("保存成功");
        setTimeout(()=>{
            router.back();
        },1000);
    };
    const onDelete=(content)=>{
        store.commit('deleteaddress', content);
        Toast("删除成功");
        setTimeout(()=>{
            router.back();
        },1000);
    };
    const init =()=>{
        store.state.userAddress.forEach((item)=>{
            if(item.id === Number(route.query.id)){
                data.addressInfo = item;
            }
        });
    };
    const address = computed(()=>{
        return route.query.type === 'add' ? '地址新增' : '地址编辑';
    });
    onMounted(()=>{
        init();
    })
    return {
        ...toRefs(data),
        onSave,
        onDelete,
    };
    },
};
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
</style>